<template>
  <div class="function-div">
    <div style="display: flex;justify-content: space-between">
      <span style="font-size: 16px;">浏览明细表(微页面)</span>
       <a-button @click="backIndexPage">返回</a-button>
    </div>
    <div style="height: 10px;"></div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      hide-select
      :defaultParams="defaultParams"
      :headParams="headParams"
      :form="form"
      row-key="id"
      :extra-fun="acquireAllAdditionData"
      :x-length="2000">
      <!-- 搜索条件 -->
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="用户昵称">
            <a-input
              style="width:180px"
              v-decorator="[
                'nickname',
              ]"
              placeholder="用户昵称"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="会员级别">
            <a-select
              style="width:180px"
              v-decorator="[
                'membershipGrade',
              ]"
              allowClear
              placeholder="会员级别"
              :options="vipList"
            >
            </a-select>
          </a-form-item>


          <a-form-item label="手机号">
            <a-input
              style="width:180px"
              v-decorator="[
                'userPhone',
              ]"
              placeholder="手机号"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="浏览类型">
            <a-select
              style="width:180px"
              v-decorator="[
                'eventSite',
              ]"
              allowClear
              placeholder="全部"
              :options="eventSiteList"
            >
            </a-select>
          </a-form-item>

          <a-form-item label="微页面名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsName',
              ]"
              placeholder="微页面名称"
            >
            </a-input>
          </a-form-item>
 <!--         <a-form-item label="商品名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsName',
              ]"
              placeholder="商品名称"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="商品id">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsId',
              ]"
              placeholder="商品id"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="是否下单">
            <a-select
              style="width:180px"
              v-decorator="[
                'isOrder',
              ]"
              placeholder="全部"
              allowClear
              :options="isOrderList"
            >
            </a-select>
          </a-form-item>-->


          <a-form-item label="浏览渠道">
            <a-select
              style="width:180px"
              v-decorator="[
                'intoChannel',
              ]"
              allowClear
              placeholder="全部"
              :options="intoChannelList"
            >
            </a-select>
          </a-form-item>

       <!--   <a-form-item label="分享名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'shareName',
              ]"
              placeholder="分享名称"
            >
            </a-input>
          </a-form-item>-->



 <!--         <a-form-item label="分享类型">
            <a-select
              style="width:180px"
              v-decorator="[
                'shareType',
              ]"
              allowClear
              placeholder="全部"
              :options="shareTypeList"
            >
            </a-select>
          </a-form-item>-->

    <!--      <a-form-item label="用户id">
            <a-input
              style="width:180px"
              v-decorator="[
                'userId',
              ]"
              placeholder="输入用户id"
            >
            </a-input>
          </a-form-item>-->

          <a-form-item label="进入时间">
            <fast-range-picker
              allowClear
              v-decorator="['enterPageTime-outPageTime']"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>

      </template>
      <!-- 操作栏 -->

      <template slot="oprationRow">
        <div>
          <miniAddition v-bind="dataAddition"></miniAddition>
        </div>
        <permission authority="">
          <a-button type="primary" @click="exportExcel">导出</a-button>
        </permission>
        <permission authority="">
<!--          <a-button type="primary" @click="refreshList">刷新列表</a-button>-->
        </permission>

      </template>
      <!-- 表格行操作 record -->
      <template slot="tableOperation" slot-scope="{  }">
        <a-space></a-space>
      </template>
    </search-table>

  </div>
</template>

<script>
  import SearchTable from "../components/searchTable"
  import { findDictNameByValue,createOptionsByDict } from '@/utils/dict'
  import miniAddition from "../components/miniAddition";

  export default {
    name: 'miniDetail',
    components: {
      SearchTable,
      miniAddition
    },
    data() {
      return {
        // 列表接口地址
        // url: 'goldenhome/member/admin_/member/benefits/page',
        url: '_/goldenhome/data/statistics/web/admin/browsData/getMicroPageStatistics',
        headParams: {}, // 请求头参数
        defaultParams: {
          shopId:this.$store.getters.userInfo.shopId
        }, // 默认携带参数
        currentRecord: {}, // 选中行数据
        infoVisible: false, // 弹窗是否显示
        handle: '', // 操作类型
        form: this.$form.createForm(this, { name: "table_search" }), // 搜索表单
        columns: [
          {
            title: "用户头像",
            dataIndex: "headPortrait",
            key:"headPortrait",

            fixed:"left",
            customRender:(text,row)=>{
              return <table-img src={row.headPortrait}/>
            }
          },
          {
            title: "用户昵称",
            dataIndex: "nickname",
            key:"nickname"
          },
          {
            title: "会员级别",
            dataIndex: "membershipGrade",
            key:"membershipGrade"
          },
          {
            title: "手机号",
            dataIndex: "userPhone",
            key:"userPhone"
          },
          {
            title: "浏览类型",
            dataIndex: "eventSite",
            key:"eventSite"
          },
          {
            title: "名称",
            dataIndex: "goodsName",
            key:"goodsName"
          },
          {
            title: "浏览进入时间",
            dataIndex: "enterPageTime",
            key:"enterPageTime"
          },
          {
            title: "浏览退出时间",
            dataIndex: "outPageTime",
            key:"outPageTime"
          },
          {
            title: "浏览时长",
            dataIndex: "browseTime",
            key:"browseTime",
            customRender:(text,row)=>{
             return this.timeChange(text)
            }
          },
         /* {
            title: "是否下单",
            dataIndex: "buy",
            key:"buy"
          },*/
         /*  {
            title: "订单详情",
            dataIndex: "detail",
            key:"detail"
          },*/
          {
            title: "浏览渠道",
            dataIndex: "intoChannel",
            key:"intoChannel"
          },
       /*   {
            title: "分享名称",
            dataIndex: "shareName",
            key:"shareName",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },
          {
            title: "分享类型",
            dataIndex: "type",
            key:"type",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },
          {
            title: "登录IP地址",
            dataIndex: "loginIp",
            key:"loginIp",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },
          {
            title: "登录地理位置",
            dataIndex: "loginAddress",
            key:"loginAddress",
            fixed: "right",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },*/
          /*  {
              title: "操作",
              dataIndex: "operation",
              scopedSlots: { customRender: "operation" },

              fixed: "right"
            }*/
        ],

        vipList:[],
        eventSiteList:[{label:'全部',value:''},{label:'微首页',value:'微首页'},{label:'分类',value:'分类'},{label:'会员',value:'会员'},{label:'购物车',value:'购物车'},{label:'我的',value:'我的'},{label:'商品列表页',value:'商品列表页'},{label:'商品详情页',value:'商品详情页'},{label:'文章浏览',value:'文章浏览'}],
        intoChannelList:[{label:'全部',value:''},{label:'公众号',value:'1'},{label:'小程序',value:'2'},{label:'用户分享',value:'3'},{label:'代理分享',value:'4'}],
        shareTypeList:[{label:'全部',value:''},{label:'公众号文章',value:'1'},{label:'链接',value:'2'},{label:'海报',value:'3'}],
        dataAddition:{
          // 公众号
          GZHbrowerTimes:"",
          GZHshareTimes:"",
          GZHbrowerTime:"",
          GZHarticleTime:'',
         /* GZHbuyTimes:'',
          GZHarticletimes:'',*/

          //小程序XCX

          XCXHbrowerTimes:"",
          XCXHshareLinkTimes:"",
          XCXHshareshop:"",
          XCXbrowerTime:"",
          XCXHLinkTime:'',
          XCXHshopTime:'',
         /* XCXbuyTimes:'40',
          XCXarlinktimes:'20',
          XCXarshoptimes:'20',*/
          // 用户分享
          userSharebrowerTimes:"",
          userShareTypeLink:"",
          userSharebrowerTime:"",
          userShareLinkTime:'',
          /*userSharebuyTimes:'',
          userSharearLinktimes:'',*/

          //代理分享proxyShare
          proxySharebrowerTimes:"",
          proxyShareshareLinkTimes:"",
          proxySharesharePoster:"",
          proxySharebrowerTime:"",
          proxyShareLinkTime:'',
          proxySharePosterTime:'',
          /*proxySharebuyTimes:'',
          proxySharearlinktimes:'',
          proxySharearpostertimes:'',*/

        }
      };
    },
    created() {
      this.getVipList()
    },
    mounted() {},
    methods: {
      getVipList(){
        this.$get('goldenhome/member/admin_/member/gradeconfig/list').then((res)=>{
          if (res && res.returnCode === 1000) {
            // this.$message.success('操作成功!')
            console.log(res)
            res.dataInfo.forEach((item) => {
              const {id, gradeName, ...other} = item
              this.vipList.push ({id:id,gradeName:gradeName})
            })
            this.vipList.forEach((item) => {
              this.$set(item, "label", item.gradeName)
              this.$set(item, "value", item.gradeName)
              // this.$set(item, "value", item.id)
              // Reflect.set(item, "label", item.gradeName)
              // Reflect.set(item, "value", item.id)
            })

            // console.log('this.vipList', this.vipList)
          }
        })
      },
      // 打开详情
      openInfo(record, type) {
        this.currentRecord = record
        this.infoVisible = true
        this.handle = type || 'edit'
      },
      // 关闭弹窗
      closeModal(freshTable) {
        this.infoVisible = false
        if (freshTable) {
          this.$refs.searchtable.refreshTable();
        }
      },


      refreshList(){
        //
        console.log("刷新列表")
        // this.$refs.searchtable.refreshTable();
        this.$refs.searchtable.handleSearch()
      },
      // 获取汇总的数据
      acquireAllAdditionData(obj){

        let params = {...obj}
        let url = "_/goldenhome/data/statistics/web/admin/browsData/getMicroPageGroupType"
        console.log(params,url)
        this.$post(url,{...params}).then((res)=>{
          if (res && res.returnCode==1000){
            console.log("汇总结果 数据赋值：",res);
            let dataSource =  res.dataInfo
            // 遍历
            for (const item of dataSource) {
              console.log(item.intoChannel)
              if (item.intoChannel.key=="小程序"){
                  // 次数
                  this.dataAddition.XCXHbrowerTimes = item.intoChannel.value
                  // this.dataAddition.XCXHshareLinkTimes = this.timeChange(item.browsTotalTime)
                  this.dataAddition.XCXHshareshop = item.intoChannel.value
                  // 时间
                  this.dataAddition.XCXbrowerTime = this.timeChange(item.browsTotalTime)
                  // this.dataAddition.XCXHLinkTime = this.timeChange(item.browsTotalTime)
                  this.dataAddition.XCXHshopTime = this.timeChange(item.browsTotalTime)

              }

              if (item.intoChannel.key=="公众号"){
                this.dataAddition.GZHbrowerTimes = item.intoChannel.value
                this.dataAddition.GZHshareTimes = item.intoChannel.value

                this.dataAddition.GZHbrowerTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.GZHarticleTime = this.timeChange(item.browsTotalTime)

              }

              if (item.intoChannel.key=="用户分享"){
                this.dataAddition.userSharebrowerTimes = item.intoChannel.value
                this.dataAddition.userShareTypeLink = item.intoChannel.value

                this.dataAddition.userSharebrowerTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.userShareLinkTime = this.timeChange(item.browsTotalTime)
              }

              if (item.intoChannel.key=="代理分享"){
                this.dataAddition.proxySharebrowerTimes = item.intoChannel.value
                this.dataAddition.proxyShareshareLinkTimes = item.intoChannel.value
                //
                this.dataAddition.proxySharebrowerTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.proxyShareLinkTime = this.timeChange(item.browsTotalTime)
              }
            }

          }
        })
      },
      backIndexPage(){
        this.$router.push({
          name: 'DataPanelOperations'
        })
      },
      exportExcel(){
        let url = "_/goldenhome/data/statistics/web/admin/browsData/exportMicroPage"
        // this.form.setFieldsValue({["goodsName"]:'asd'})

        let  goodsName = this.form.getFieldValue('goodsName')

        let  membershipGrade = this.form.getFieldValue('membershipGrade')
        let  eventSite = this.form.getFieldValue('eventSite')
        let  userPhone = this.form.getFieldValue('userPhone')
        let  nickName = this.form.getFieldValue('nickName')

        let  intoChannel = this.form.getFieldValue('intoChannel')
        let  shareName = this.form.getFieldValue('shareName')
        let  shareType = this.form.getFieldValue('shareType')



        /*   let  enterPageTime
           let  outPageTime
           if (!!this.form.getFieldValue('enterPageTime-outPageTime')){
             enterPageTime = this.form.getFieldValue('enterPageTime-outPageTime')[0]
             outPageTime = this.form.getFieldValue('enterPageTime-outPageTime')[1]
           }*/
        let params = {
          nickName,
          membershipGrade,
          userPhone,
          goodsName,
          intoChannel,
          shareName,
          shareType,
          eventSite

          /* enterPageTime,
           outPageTime*/
        }

        console.log("导出的参数:",params)

        this.$export(url,{...params})

      },
      // 时间转换 秒 ==>...
      timeChange(text){
        let result = parseInt(text)
        // let d = Math.floor(result / 3600/24) < 10 ? '' + Math.floor(result / 3600/24) : Math.floor(result / 3600/24);
        let h = Math.floor(result / 3600) < 10 ? '' + Math.floor(result / 3600) : Math.floor(result / 3600);
        let m = Math.floor((result / 60 % 60)) < 10 ? '' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
        let s = Math.floor((result % 60)) < 10 ? '' + Math.floor((result % 60)) : Math.floor((result % 60));
        let res = '';

        // if(d !== '0') res += `${d}天`;
        // if(h !== '0') res += `${h-24*d}小时`;
        // if(h !== '0') res += `${h}小时`;
        if(h !== '0') res += `${h}小时`;
        if(m !== '0') res += `${m}分钟`;
        res += `${s}秒`;
        return res;
      }
    }
  };
</script>

<style lang="less" scoped></style>